<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小班管理</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>

<div class="layui-container" style="margin-top: 5px">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend><h2>小班管理</h2></legend>
    </fieldset>

    <table id="classTable" lay-filter="classDetail"></table>

    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-radius" id="btnAdd">添加小班</button>
                <button class="layui-btn layui-btn-radius" id="btnList">查看小班信息</button>
                <button class="layui-btn layui-btn-radius" id="btnUpdate">修改小班信息</button>
            </div>
        </div>
    </div>

    <!--开启查询-->
    <div class="layui-row">
        <div class="layui-col-md4 layui-col-md-offset7">

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>查询小班信息</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label"><h3>小班名称</h3></label>
                <div class="layui-input-block">
                    <input type="text" name="className" placeholder="请输小班名称" autocomplete="off" class="layui-input" id="className" style="padding: 15px;box-shadow: 0 0 5px rgba(0,0,0,0.5)">
                </div>
                <br>
                <label class="layui-form-label"><h3>负责区域</h3></label>
                <div class="layui-input-block">
                    <input type="text" name="areaName" placeholder="请输入负责区域" autocomplete="off" class="layui-input" id="areaName" style="padding: 15px;box-shadow: 0 0 5px rgba(0,0,0,0.5)">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-icon layui-btn-radius" id="btnQuery">立即查询</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../layui/layui.js"></script>
<script>
    layui.use(['table','jquery','layer'],function () {
        let table = layui.table;
        let layer = layui.layer;
        let $ = layui.$;

        //第一个实例
        let t = table.render({
            elem: '#classTable',
            url: '/MyForestManagerSystem/cs.do?method=class_detail_page', //数据接口,从servlet注解中urlPatterns = "/as.do"获取
            page: true ,//开启分页
            request: {//可不写，有默认的page和limit
                pageName: 'pageNo', //页码的参数名称，默认：page
                limitName: 'pageSize', //每页数据量的参数名，默认：limit
            },
            limits:[3,6,9],
            cols: [[ //表头
                 {
                    field: 'className',
                    title: '小班名称',
                    width: 150,
                    align:'center',
                    fixed: 'left'
                }, {
                    field: 'managerPeople',
                    title: '负责人',
                    width: 200,
                    align:'center',
                    edit: true
                }, {
                    field: 'tel',
                    title: '负责人电话',
                    width: 200,
                    align:'center',
                    edit: true
                }, {
                    field: 'areaName',
                    title: '负责地域',
                    width: 200,
                    align:'center',
                }, {fixed: 'right',
                    idth:200,
                    align:'center',
                    title: '操作',
                    toolbar: '#barDemo'}
            ]]
        });
        //查询
        $("#btnQuery").on("click",function () {
            t.reload({
                where:{
                    className:$("#className").val(),
                    areaName:$("#areaName").val(),
                },
                page:{
                    curr:1,
                }
            })
        })
        //添加
        $("#btnAdd").on("click",function () {
            layer.open({
                type:2,
                content:"/MyForestManagerSystem/home/class_add.html",
                title: '添加小班信息',
                area: ['400px', '400px'],
                shade: [0.8, '#393D49'],
                anim:6,
                maxmin: true,
                btn:["确定","关闭"],
                yes: function (index, layero) {
                    let body = layer.getChildFrame("body",index);
                    let className = body.find("input[name=className]").val();
                    let managerPeople = body.find("input[name=managerPeople]").val();
                    let tel = body.find("input[name=tel]").val();
                    let number = body.find("input[name=number]").val();
                    let areaName = body.find("select[name=areaName]").val();
                    $.ajax({
                        type:"get",
                        url:"/MyForestManagerSystem/cs.do?method=add_class",
                        data:{"className":className,"managerPeople":managerPeople,"tel":tel,"number":number,"areaName":areaName},
                        success:function (data) {
                            if(data === "true"){
                                t.reload({
                                    page:{
                                        curr:1,
                                    }
                                })
                                layer.alert("添加成功")
                            }else{
                                layer.alert("添加失败")
                            }
                        }
                    })
                    layer.close(layer.index);
                } ,btn2:function (index, layero) {
                    return true;//默认--开启return false该代码可禁止点击该按钮关闭
                }
            })
        })
        table.on('tool(classDetail)',function (obj) {//注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'detail') { //查看
                layer.open({
                    type: 2 //此处以iframe举例
                    , content: '/MyForestManagerSystem/home/class_detail.html'
                    , title: '小班详情'
                    , area: ['400px', '400px']//宽高
                    , shade: [0.8, '#393D49']//遮罩
                    //,time:5000//窗口显示时间，自动关闭所需毫秒
                    , anim: 1//弹出动画 类型：Number，0-6 默认：0
                    , maxmin: true//窗口最大最小化。
                    , btn: ['确定', '关闭']
                    , yes: function (index, layero) {
                        //yes - 确定按钮回调方法
                        // 类型：Function，默认：null 该回调携带两个参数，分别为当前层索引index、当前层DOM对象layero。
                        //按钮【按钮一】的回调
                        // let body = layer.getChildFrame('body',index);
                        // let bookName = body.find("input[name=bookName]").val();
                        layer.close(layer.index);
                    }
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调

                        //return false; //开启该代码可禁止点击该按钮关闭
                    }
                    //success - 层弹出后的成功回调方法
                    //类型：Function，默认：null
                    //success会携带两个参数，分别是当前层DOM layero，当前层索引index。
                    , success: function (layero, index) {
                        //layer.getChildFrame(selector, index) - 获取iframe页的DOM
                        let body = layer.getChildFrame('body', index);
                        body.find("input[name=className]").val(data.className);
                        body.find("input[name=managerPeople]").val(data.managerPeople);
                        body.find("input[name=tel]").val(data.tel);
                        body.find("input[name=number]").val(data.num);
                        body.find("input[name=areaName]").val(data.areaName);
                        body.find("input[name=treeType]").val(data.treeType);
                        body.find("input[name=land]").val(data.land);
                        body.find("input[name=advTree]").val(data.advTree);
                        body.find("input[name=createTime]").val(data.createTime);
                    }
                });
            }else if(layEvent === "update") {
                $.ajax({
                    type: "get",
                    url: "/MyForestManagerSystem/cs.do?method=update_class",
                    data:{
                        "classId":data.classId,
                        "managerPeople":data.managerPeople,
                        "tel":data.tel,
                    },
                    success: function (data) {
                        if (data === "true") {
                            //同步更新缓存对应的值
                            layer.msg("更新成功")
                        } else {
                            layer.msg("更新失败")
                        }
                    }
                })
            }
        })
    });
</script>
<!--添加操作-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs " lay-event="update"> 编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"> 删除</a>
</script>
</html>